<template>
  <view>
    <view class="u-flex u-flex-y-center u-flex-around user-box u-p-l-30 u-p-r-20 u-p-b-30">
      <view class="u-m-r-10 u-p-10">
        <u-avatar
          :src="
            memberStore?.profile?.avatarUrl
              ? memberStore?.profile?.avatarUrl
              : '/static/icons/avatar.png'
          "
          size="80"
        ></u-avatar>
      </view>
      <view class="u-flex-1">
        <view class="u-font-18 u-p-b-20">{{ memberStore?.profile?.nickName }}</view>
        <view class="u-font-14 u-tips-color">{{ memberStore?.profile?.username }}</view>
      </view>
      <view class="u-m-l-10 u-p-10"> </view>
      <view class="u-m-l-10 u-p-10"> </view>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell icon="rmb-circle" title="跟进任务" isLink url="/pagesTodo/followTask/list"></u-cell>
        <u-cell icon="rmb-circle" title="线下会议" isLink url="/pagesTodo/meeting/list"></u-cell>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell icon="star" title="跟进记录" isLink url="/pagesCustomer/followRecord/list"></u-cell>
        <u-cell icon="photo" title="销售机会" isLink url="/pagesCustomer/opportunity/list"></u-cell>
        <u-cell icon="coupon" title="联系方式" isLink url="/pagesCustomer/contact/list"></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores'

const memberStore = useMemberStore()
</script>

<style lang="scss">
page {
  background-color: #ededed;
}

.camera {
  width: 54px;
  height: 44px;

  &:active {
    background-color: #ededed;
  }
}
.user-box {
  background-color: #fff;
}
.u-cell-group {
  background-color: #fff;
}
</style>
